﻿@{
    Layout = null;
}

<div id="BuscarConsultaModal" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <h4 class="modal-title">Buscar Consulta</h4>
    </div>

    <div class="modal-body no-padding">
        <div class="space10 toolbar">
            <button id="btnBuscarConsulta" class="btn btn-xs btn-primary">Buscar</button>
            <button id="btnLimpiarConsulta" class="btn btn-xs btn-default">Limpiar</button>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-4 no-padding">
                <div class="col-sm-12">
                    DNI
                </div>
                <div class="col-xs-12">
                    <input type="text" id="txtConsultaSearchDni" class="form-control">
                </div>
            </div>
            <div class="col-xs-8 no-padding">
                <div class="col-sm-12">
                    Nombres
                </div>
                <div class="col-xs-12">
                    <input type="text" id="txtConsultaSearchNombres" class="form-control">
                </div>
            </div>
        </div>
        <div class="space10"></div>
        <div class="col-xs-12">
            <div id="ConsultaListResult" class="col-xs-12">
            </div>
        </div>
    </div>

    <div class="modal-footer" style="margin-top: 15px">
        <button id="CancelarBuscarConsulta" type="button" data-dismiss="modal" class="btn btn-xs btn-default">
            Cancelar
        </button>
        <button id="AceptarBuscarConsulta" type="button" data-dismiss="modal" class="btn btn-xs btn-primary">
            Aceptar
        </button>
    </div>
</div>

<script src="~/assets/plugins/jquery/jquery.js"></script>

<script>
    /* start: Consulta toolbar */
    $('#btnBuscarConsulta').click(function () {
        $.get('@Url.Action("SearchConsulta", "Consulta")?dni=' + $('#txtConsultaSearchDni').val() + '&nombres=' + $('#txtConsultaSearchNombres').val(), function (data) {
            CreateConsultaGrid(data);
        });
    });

    $('#AceptarBuscarConsulta, #CancelarBuscarConsulta,#btnLimpiarConsulta').click(function () {
        $('#txtConsultaSearchDni').val('');
        $('#txtConsultaSearchNombres').val(''),
        $('#ConsultaListResult').empty();
    });
    /* end: Consulta toolbar */

    /* Crea la tabla de consultas al dar click en Buscar Consulta*/
    function CreateConsultaGrid(data) {
        var $consultasList = $('#ConsultaListResult'),
            listHTML = '';

        $consultasList.empty();

        if (data.length > 0) {
            listHTML += '<table class=\"table table-striped table-bordered table-hover table-full-width\">' +
                            '<thead><tr>' +
                                '<th>Paciente</th><th>Fecha Consulta</th><th>Motivo</th>' +
                            '</tr></thead>';

            listHTML += '<tbody>';

            $.each(data, function (i, n) {
                debugger;
                listHTML += '<tr>' +
                                '<td style=\"display:none\">' + n.numDocumento + '</td><td>' + n.nombres + '</td><td>' + n.fechaCreacion + '</td><td>' + n.motivoConsulta + '</td><td style=\"display:none\">' + n.idConsultaDental + '</td>'
                            '</tr>';
            });

            listHTML += '</tbody></table>';

            $consultasList.append(listHTML);

            GridConsultaSettings();
        } else {
            $consultasList.empty();
            alert('No se encontraron resultados');
        }
    }

    /* Vincula cada fila de la tabla al evento doble click para seleccionar consulta y mostrar datos    */
    function GridConsultaSettings() {
        $('#ConsultaListResult tbody > tr').dblclick(function () {
            var dni = $(this).children('td:first').text();
            var idConsulta = $(this).children('td:last').text();

            $.get('@Url.Action("GetConsulta", "Consulta")?dni=' + dni + '&idConsulta=' + idConsulta, function (data) {
                /* Consulta */
                $('#txtNumeroConsulta').val(data.idConsultaDental);
                $('#dtpFecha').val(data.fechaCreacion);
                $('#txtMotivoConsulta').val(data.motivoConsulta);
                $('#txtSintomas').val(data.sintomas);
                $('#txtObservacion').val(data.observacion);
                /* Paciente */
                $('#txtCodigo').val(data.idCodigo);
                $('#txtDni').val(data.numDocumento);
                $('#txtNombresApellidos').val(data.nombres);
                $('#txtDireccion').val(data.direccion);
                $('#txtTelefono').val(data.telefono);
                $('#txtSexo').val(data.sexo);
                $('#txtEdad').val(data.fechaNacimiento);
                $('#txtEstadoCivil').val(data.estadoCivil);
                $('#txtPaisOrigen').val(data.paisOrigen);
            });
        })
    }
</script>
